<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复习盒子模型</title>
		<style type="text/css">
			.box{
				width: 300px;
				/* height: 300px; */
				background-color: #CCCCCC;
			    border: 2px solid #000000;
				padding: 20px;
				box-sizing: border-box; /*标准盒模型转换转换为ie盒模型*/
			}
			span {
				padding: 10px;
			};
		</style>
	</head>
	<body>
		<!-- 复习盒子模型
		 content（内容区域）width=300px
		 border（边框）
		 padding（内边距）
		 margin（外边距）
		 
		 box-sizing: 转变盒模型 （content-box，标准盒模型 、border-box ie盒模型
		 标准盒模型：在网页中实际的宽度 =   content宽度 + border宽度 +padding宽度 + margin（外边距）
		 IE盒模型：在网页中实际的宽度 =   style里设置的宽度 
		 -->
		<div class="box">
			<span>Lorem ipsum dolor sit amet, </span>
			<span>Lorem ipsum dolor sit amet, </span>
		</div>	
	</body>
</html>
